<template>
  <div class="opvi">
    <!-- 我的 -->
    <div class="myclick">
      <div class="iconfont icon-icon-test6 zj" @click="goFn"></div>
      <div class="jiji">账号信息</div>
    </div>
    <div class="touxiang">
      <div class="r1">头像</div>
      <div class="t-you">
        <div class="tx">
          <img v-lazy="srcc" />
        </div>
        <div class="iconfont icon-icon-test8 aa"></div>
      </div>
    </div>
    <div class="username">
      <div class="r2">用户名</div>
      <div class="user">
        <div class="us">{{ username }}</div>
        <div class="iconfont icon-icon-test8 aa"></div>
      </div>
    </div>
    <div class="shophere">
      <div class="r3">收货地址</div>
      <div class="iconfont icon-icon-test8 aa"></div>
    </div>
    <div class="wb1">账号绑定</div>
    <div class="shouji">
      <div class="s-left">
        <div class="iconfont icon-phone r4"></div>
        <div>手机</div>
      </div>
      <div class="iconfont icon-icon-test8 aa"></div>
    </div>
    <div class="wb1">安全设置</div>
    <div class="signe">
      <div class="r5">登录密码</div>
      <div class="xiugai">
        <div>修改</div>
        <div class="iconfont icon-icon-test8 aa"></div>
      </div>
    </div>
    <van-button
      @click="Dialog"
      round
      color="linear-gradient(to right,#feac5e,#c779d0,#4bc0c8)"
      type="info"
      size="large"
      class="bu"
      >退出登录</van-button
    >
  </div>
</template>
<script>
import Vue from 'vue';
import { Dialog, Button } from 'vant';
Vue.use(Dialog)
Vue.use(Button)
export default {
  data() {
    return {
      username: '',
      srcc: require('../../assets/images/8.jpg')
    }
  },
  methods: {
    goFn() {
      this.$router.go(-1)
    },
    Dialog() {
      this.$dialog.confirm({
        message: '是否退出登录',
        confirmButtonColor: 'red'
      }).then(() => {
        console.log('退出登录')
        window.sessionStorage.clear('username')
        window.sessionStorage.clear('token')
        this.$router.replace({ name: 'center' })
        setTimeout(() => {
          location.reload()
        }, 300)
      }).catch(() => {
        console.log('再等等')
      })
    }
  },
  created() {
    const username = sessionStorage.getItem("username")
    this.username = username
  },
  beforeDestroy() {
    this.$bus.$emit('hideMenu', true)
  },
  mounted() {
    this.$bus.$emit('hideMenu', false)
  },
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
}
</script>

<style lang="scss" scoped>
.r1 {
  margin-left: 10px;
}
.r2 {
  margin-left: 10px;
}
.r3 {
  margin-left: 10px;
}
.r4 {
  font-size: 28px;
}
.r5 {
  margin-left: 10px;
}
.opvi {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 20;
  top: 0;
  background: linear-gradient(45deg, #feac5e, #c779d0, #4bc0c8);
  font-size: 16px;
  color: #333;
}
.myclick {
  width: 100%;
  height: 51px;
  background: linear-gradient(to left, #d3959b, #bfe6ba);
  border-bottom: 1px solid #fff;
}
.zj {
  position: absolute;
  width: 30px;
  height: 30px;
  font-size: 30px !important;
  color: #fff;
  text-align: center;
  line-height: 30px;
  top: 10px;
  left: 10px;
}
.jiji {
  width: 100%;
  height: 50px;
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 51px;
  font-weight: bold;
}
.touxiang {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 82px;
  margin-top: 20px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background: linear-gradient(45deg, #feac5e, #c779d0, #4bc0c8);
}
.tx {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.tx img {
  width: 100%;
  border-radius: 50%;
}
.t-you {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.aa {
  line-height: 80px;
  font-size: 30px;
  color: #ccc;
}
//用户名
.username {
  height: 53px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
  background: linear-gradient(to right, #feac5e, #c779d0, #4bc0c8);
}
.user {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
//收货
.shophere {
  height: 53px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
  background: linear-gradient(to right, #feac5e, #c779d0, #4bc0c8);
}
.wb1 {
  width: 100%;
  height: 40px;
  text-align: left;
  line-height: 50px;
  font-size: 16px;
  color: #333;
  border-bottom: 1px solid #ddd;
  padding-left: 10px;
}
//手机
.shouji {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 53px;
  border-bottom: 1px solid #ddd;
  background: linear-gradient(to right, #feac5e, #c779d0, #4bc0c8);
}
.s-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 10px;
}
//修改
.signe {
  height: 53px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to right, #feac5e, #c779d0, #4bc0c8);
  border-bottom: 1px solid #ddd;
}
.xiugai {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.bu {
  margin-top: 20px;
}
</style>
